<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <style>
        .content{
            padding-top: 20px;
            width: 250px;
            height: 320px;
            background-color: #93202b;
            text-align: center;
            color: white;
        }
        .time{
            display: inline-block;
            width: 32px;
            height: 32px;
            font-size: 22px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="content">
        <h3>今天是2023年11月30日</h3>
        <h1>下班倒计时</h1>
        <div class="countdown">
            <span class="time-h time">00</span>
            <span>:</span>
            <span class="time-m time">00</span>
            <span>:</span>
            <span class="time-s time">00</span>
        </div>
        <h2>18:30下班</h2>
    </div>
    <script>
        const date=new Date()
        let m=date.getMonth()+1
        m=m<10?'0'+m:m
        let d=date.getDate()
        d=d<10?'0'+d:d
        document.querySelector('h3').innerHTML=`今天是${date.getFullYear()}年${m}月${d}日`
        const future=+new Date(`2023-${m}-${d} 19:08:00`)
        getTime()
        const n=setInterval(getTime,1000)
        function getTime(){
            const s=parseInt((future-(+new Date()))/1000)
            let h=parseInt(s/60/60%24)
            h=h<10?'0'+h:h
            let m=parseInt(s/60%60)
            m=m<10?'0'+m:m
            let second=s%60
            second=second<10?'0'+second:second
            document.querySelector('.time-h').innerHTML=h
            document.querySelector('.time-m').innerHTML=m
            document.querySelector('.time-s').innerHTML=second
            if(h==='00'&&m==='00'&&second==='00'){
                clearInterval(n)
            }
        }
    </script>
</body>
</html>